<template>
  <div style="height: 100%" ref="heroRadarRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  ToolboxComponentOption,
  GridComponent,
  LegendComponent,
  LegendComponentOption,
} from 'echarts/components';
import { RadarChart, RadarSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent, GridComponent, LegendComponent, RadarChart, CanvasRenderer, UniversalTransition]);
type shoesRadarChartOption = echarts.ComposeOption<
  TitleComponentOption | ToolboxComponentOption | LegendComponentOption | RadarSeriesOption
>;

let heroRadarChartInstance: any = null;
const dispose = [null, '', undefined];

// 英雄属性分析雷达图
const heroRadarRef = ref<HTMLElement | null>(null);
const initHeroRadar = () => {
  if (heroRadarRef.value === null) return;
  if (!dispose.some((k: null | string | undefined) => k === heroRadarChartInstance)) heroRadarChartInstance.dispose();
  heroRadarChartInstance = echarts.init(heroRadarRef.value);
  const option: shoesRadarChartOption = {
    title: {
      text: '英雄属性',
    },
    tooltip: {
      show: true,
      backgroundColor: 'rgba(9, 30, 60, 0.6)',
      extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
      borderWidth: 0,
      confine: false,
      appendToBody: true,
      textStyle: {
        color: '#fff',
        fontSize: 10,
      },
    },
    legend: {
      show: true,
      itemWidth: 10,
      itemHeight: 3,
      top: '1%',
      right: 0,
      orient: 'horizontal',
      textStyle: {
        fontSize: 12,
        color: 'color',
      },
      data: ['破败之王', '法外狂徒', '圣枪游侠', '塞拉斯'],
    },
    radar: {
      center: ['50%', '58%'],
      radius: '70%',
      startAngle: 90,
      splitNumber: 3,
      splitArea: {
        areaStyle: {
          color: ['transparent'],
        },
      },
      indicator: [
        { name: '伤害', max: 3, color: '#606266' },
        { name: '功能', max: 3, color: '#606266' },
        { name: '机动', max: 3, color: '#606266' },
        { name: '控制', max: 3, color: '#606266' },
        { name: '强韧', max: 3, color: '#606266' },
      ],
    },
    series: [
      {
        name: '破败之王',
        type: 'radar',
        symbol: 'circle',
        symbolSize: 1.2,
        areaStyle: {
          color: 'rgba(84, 255, 159, 0.4)',
        },
        itemStyle: {
          color: 'rgba(84, 255, 159, 1)',
          borderColor: 'rgba(84, 255, 159, 0.7)',
          borderWidth: 6,
        },
        lineStyle: {
          type: 'solid',
          color: 'rgba(84, 255, 159, 1)',
          width: 1,
        },
        emphasis: {
          focus: 'self',
        },
        data: [
          {
            value: [3, 1, 2, 2, 1],
            name: '破败之王',
          },
        ],
      },
      {
        name: '法外狂徒',
        type: 'radar',
        symbol: 'circle',
        symbolSize: 1.2,
        areaStyle: {
          color: 'rgba(245, 108, 108, 0.4)',
        },
        itemStyle: {
          color: 'rgba(245, 108, 108, 1)',
          borderColor: 'rgba(245, 108, 108, 0.7)',
          borderWidth: 6,
        },
        lineStyle: {
          type: 'solid',
          color: 'rgba(245, 108, 108, 1)',
          width: 1,
        },
        emphasis: {
          focus: 'self',
        },
        data: [
          {
            value: [3, 2, 2, 1, 2],
            name: '法外狂徒',
          },
        ],
      },
      {
        name: '圣枪游侠',
        type: 'radar',
        symbol: 'circle',
        symbolSize: 1.2,
        areaStyle: {
          color: 'rgba(135, 206, 250, 0.4)',
        },
        itemStyle: {
          color: 'rgba(135, 206, 250, 1)',
          borderColor: 'rgba(135, 206, 250, 0.7)',
          borderWidth: 6,
        },
        lineStyle: {
          type: 'solid',
          color: 'rgba(135, 206, 250, 1)',
          width: 1,
        },
        emphasis: {
          focus: 'self',
        },
        data: [
          {
            value: [3, 1, 3, 1, 1],
            name: '圣枪游侠',
          },
        ],
      },
      {
        name: '塞拉斯',
        type: 'radar',
        symbol: 'circle',
        symbolSize: 1.2,
        areaStyle: {
          color: 'rgba(132, 112, 255, 0.4)',
        },
        itemStyle: {
          color: 'rgba(132, 112, 255, 1)',
          borderColor: 'rgba(132, 112, 255, 0.7)',
          borderWidth: 6,
        },
        lineStyle: {
          type: 'solid',
          color: 'rgba(132, 112, 255, 1)',
          width: 1,
        },
        emphasis: {
          focus: 'self',
        },
        data: [
          {
            value: [2, 1, 3, 1, 2],
            name: '塞拉斯',
          },
        ],
      },
    ],
  };
  option && heroRadarChartInstance.setOption(option);
};

// echarts resize
const initEchartsResize = () => {
  nextTick(() => {
    heroRadarChartInstance.resize();
  });
};

// 监听 echarts resize
const listenEchartsResize = () => {
  window.addEventListener('resize', initEchartsResize);
};

onMounted(() => {
  initHeroRadar();
  listenEchartsResize();
});

onUnmounted(() => {
  window.removeEventListener('resize', initEchartsResize);
});
</script>

<style scoped lang="scss"></style>
